<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/address-edit.css">
    <link rel="stylesheet" href="../css/message.css">
    <title>新增地址</title>
</head>
<body>
<div id="address_edit">
    <div class="divHead">
        <div class="divTitle">
            <i class="el-icon-arrow-left" @click="goBack"></i>{{title}}
        </div>
    </div>
    <div class="divContent">
        <div class="divItem">
            <span>联系人：</span>
            <el-input placeholder=" 请填写收货人的姓名" v-model="form.consignee"  maxlength='10' class="inputUser"/></el-input>
            <span class="spanChecked" @click="form.sex = '男'">
                    <i :class="{iActive:form.sex === '男'}"></i>
                    先生
                   </span>
            <span class="spanChecked" @click="form.sex = '女'">
                    <i :class="{iActive:form.sex === '女'}"></i>
                    女士
                </span>
        </div>
        <div class="divItem">
            <span>手机号：</span>
            <el-input placeholder=" 请填写收货人手机号码" v-model="form.phone"  maxlength='20' style="width: calc(100% - 10rem);"/></el-input>
        </div>
        <div class="divItem">
        <span>收货地址：</span>
        <el-input placeholder=" 请输入收货地址" v-model="form.detail"  maxlength='140'/></el-input>
    </div>
        <div class="divItem ">
            <span>标签：</span>
            <span v-for="(item,index) in labelList" :key="index" @click="form.label = item;activeIndex = index" :class="{spanItem:true,spanActiveSchool:activeIndex === index}">{{item}}</span>
        </div>
        <div class="divSave" @click="saveAddress">保存地址</div>
        <div class="divDelete" @click="deleteAddress" v-if="id">删除地址</div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/interceptors.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: "#address_edit",
        data: {

            title: '新增收货地址',
            form: {
                consignee: '',//联系人
                phone: undefined,//手机号
                sex: '男',//
                detail: '',//收货地址
                label: '无',//标签
            },
            labelList: [
                '无', '公司', '家', '学校'
            ],
            id: undefined,
            activeIndex: 0

        },
        methods:{
            goBack(){
                history.go(-1)
            },
            saveAddress(){
                axios.post("/font/address/save",this.form)
                    .then(res =>{
                        if (res.data.code == 20011){
                            this.$message.success("添加成功！！！")
                            setTimeout(()=>{
                                this.goBack();
                            },1000)
                        }else {
                            this.$message.warning(res.data.message);
                        }
                    })
                    .catch(err =>{
                        this.$message.error("接口异常");
                    })
            },
            deleteAddress(){

            },
        },
        mounted(){

        }
    })
</script>
</html>